<template>
  <div class="tabs" :class="[customClass]">
    <div v-if="tabs.length <= 4" class="row">
      <div
        v-for="item in tabs"
        :key="item.value"
        class="cell row jc-around"
        style="margin: 0 0.1rem"
        @click="clickTab(item)"
      >
        <van-image
          :src="
            tab.value === item.value
              ? resource.tab_btn_large_active
              : resource.tab_btn_large
          "
          class="image"
        />
        {{ item.title }}
      </div>
    </div>
    <div class="scroll-content">
      <div
        v-for="(item, index) in tabs"
        :key="item.value"
        class="cell"
        style="margin: 0 0.1rem"
        @click="clickTab(item, index)"
      >
        <van-image
          :src="
            tab.value === item.value
              ? resource.tab_btn_large_active
              : resource.tab_btn_large
          "
          class="image"
        />
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import resource from "@/utils/resource";
export default {
  props: {
    tabs: Array,
    initial: {
      default: 0,
      type: Number,
    },
    customClass: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      resource,
      tab: this.tabs[this.initial],
      scrollLeft: 0,
      scrollW: 0,
      sizeWidth: [],
    };
  },
  methods: {
    clickTab(item, index) {
      if (this.tab.value == item.value) return;
      this.tab = item;
      this.$emit("change", item);
      //   if (index) {
      //     this.scrollLeft =
      //       this.sizeWidth[index].left -
      //       this.scrollW / 2 +
      //       this.sizeWidth[index].width / 2;
      //   }
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  height: 0.56rem;
  .cell {
    height: 100%;
    width: 1.6rem;
    position: relative;
    font-size: 0.28rem;
    color: #fff;
    line-height: 0.56rem;
    text-align: center;
    .image {
      width: 1.6rem;
      height: 0.56rem;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.scroll-content {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  line-height: 0.6rem;
  white-space: nowrap;
  width: 100%;
  .cell {
    display: inline-block;
    overflow: hidden;
    line-height: 0.6rem;
    text-align: center;
  }
}
</style>